<template>
  <Layout>
    <Title title="经营历程表"></Title>

    <div class="select-time-range">
      <span>请选择一个时间段： </span>
    </div>

    <div>
      <el-date-picker
          class="select-time-range"
          v-model="date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          unlink-panels
          :picker-options="pickerOptions"
          :default-time="['00:00:00', '00:00:00']">
      </el-date-picker>
    </div>


    <div class="select-client">
      <el-select v-model="clientSelected" clearable filterable placeholder="请选择客户" @change="filterData($event)"
      >
        <el-option
            v-for="item in clients"
            :key="item.id"
            :label="item.name"
            :value="item.name"
        >
        </el-option>
      </el-select>
    </div>

    <div class="select-client">
      <el-select v-model="typeSelected" clearable filterable placeholder="请选择单据类型" @change="filterData($event)"
      >
        <el-option
            v-for="item in types"
            :key="item"
            :label="item"
            :value="item"
        >
        </el-option>
      </el-select>
    </div>



    <div class="select-client">
      <el-select v-model="userSelected" clearable filterable placeholder="请选择业务员" @change="filterData($event)"
      >
        <el-option
            v-for="item in user"
            :key="item.id"
            :label="item.name"
            :value="item.name"
        >
        </el-option>
      </el-select>
    </div>

    <div class="button">
      <el-button
          class="search"
          type="primary"
          size="small"
          icon="el-icon-search"
          @click="getData()"
      >
        查询
      </el-button>
    </div>

    <el-button @click="exportAsExcel">导出Excel</el-button>


    <div class="detail-table">
      <el-table
          :data="filteredData"
          style="width: 100%"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          border
      >
        <el-table-column
            prop="id"
            label="单据编号  (详情信息需导出表查看)  "
        >
        </el-table-column>
<!--          <el-table-column-->
<!--              prop="type"-->
<!--              label="单据类型"-->
<!--          >-->
<!--          </el-table-column>-->
<!--        <el-table-column-->
<!--            prop="salesman"-->
<!--            label="业务员"-->
<!--        >-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--            prop="supplier"-->
<!--            label="客户"-->
<!--        >-->
<!--        </el-table-column>-->

      </el-table>
    </div>

  </Layout>
</template>

<script>
import Layout from "@/components/content/Layout";
import Title from "@/components/content/Title";
import {formatDate} from "@/common/utils";

import {
  getAllCommodity
} from "@/network/commodity";

import {
  findAllUsers,
  getAll,
  getAllCustomer, getPurchaseReturnsSheet, getPurchaseSheet, getSaleReturnsSheet, getSaleSheet
} from "@/network/sale";

import {
  getAllSaleDetailByTime
} from "@/network/sale";
import * as XLSX from "xlsx";



export default {
  components: {
    Layout,
    Title
  },
  data() {
    return {
      billList:[],
      billForm:{
        billId:'',
        type:'',
        customer:'',
        user:''
      },
      date: '',
      commoditySelected: '',
      commodities: [],
      clientSelected: '',
      clients: [],
      typeSelected:'',
      types:['销售出货单','销售退货单','进货单','进货退货单','财务类单据'],
      userSelected:'',
      user: [],
      data: [],
      filteredData: [],

      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            end.setTime(end.getTime());
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            end.setTime(end.getTime());
            picker.$emit('pick', [start, end]);
          }
        },{
          text: '最近一年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
            end.setTime(end.getTime());
            picker.$emit('pick', [start, end]);
          }
        }
        ]
      },
      excelFields: {
        '单据编号': 'id',
        '单据类型': 'type',
        '客户': 'client',
        '业务员': 'salseman'
      },
    }
  },
  async mounted() {
    this.getAllCommodities();
    this.getAllCustomer();
    this.findAllUsers();
  },
  computed: {
    beginDate: function () {
      return this.date === null ? null : formatDate(this.date[0])
    },
    endDate: function () {
      return this.date === null ? null : formatDate(this.date[1])
    },

  },
  methods: {
    exportAsExcel(){
      const data = XLSX.utils.json_to_sheet(this.filteredData);
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, data, 'data');
      XLSX.writeFile(wb,'ExportExcel.xlsx');
      alert("导出成功");
    },

    getAllCommodities() {
      getAllCommodity().then(res => {
        this.commodities = this.commodities.concat(res.result);
      })
    },
    getAllCustomer() {
      getAll().then(res => {
        this.clients = this.clients.concat(res.result);
      })
    },
    findAllUsers() {
      findAllUsers().then(res => {
        this.user = this.user.concat(res.result);
      })
    },

    getData() {
      if (this.date === '' || this.beginDate === null || this.endDate === null) {
        this.$message.error('请选择时间段');
        return
      }
      let params = {
        "beginDate": String(this.beginDate).substring(0,10),
        "endDate": String(this.endDate).substring(0,10),
        "cName":this.clientSelected,
        "operator":this.userSelected,
      }
      if(this.typeSelected==='销售出货单'){
        getSaleSheet(params).then(res => {
          if (res.code === '00000') {
            this.$message.success('查询成功')
            this.data = [];
            this.data = this.data.concat(res.result);
            console.log(res.result)
            this.filteredData =this.data;
          } else {
            this.$message.error('该时间段内无数据');
          }
        })
      }else if(this.typeSelected==='销售退货单'){
        getSaleReturnsSheet(params).then(res => {
          if (res.code === '00000') {
            this.$message.success('查询成功')
            this.data = [];
            this.data = this.data.concat(res.result);
            console.log(res.result)
            this.filteredData = this.data;
          } else {
            this.$message.error('该时间段内无数据');
          }
        })
      }else if(this.typeSelected==='进货单'){

        getPurchaseSheet(params).then(res => {
          if (res.code === '00000') {
            this.$message.success('查询成功')
            this.data = [];
            this.data = this.data.concat(res.result);
            console.log(res.result)
            this.filteredData = this.data;
          } else {
            this.$message.error('该时间段内无数据');
          }
        })
      }else if(this.typeSelected==='进货退货单'){    console.log(params)
        //console.log("111111111111111111111111111s")
        getPurchaseReturnsSheet(params).then(res => {
          //console.log("222222222222")
          if (res.code === '00000') {
            this.$message.success('查询成功')
            this.data = [];
            this.data = this.data.concat(res.result);
            console.log(res.result)
            this.filteredData = this.data;
          } else {
            this.$message.error('该时间段内无数据');
          }
        })
      }
      else{
        this.data = [];
        this.$message.error('error');
      }


    },
  }
};
</script>

<style scoped lang="scss">
.select-sale-man, .select-time-range, .search, .customer-table, .max-amount, .select-client ,.select-commodity{
  margin: 1rem 1rem 1rem 1rem;
}

.export-excel-wrapper {
  margin: 1rem 1rem 1rem 1rem;
}
.input-user{
  margin: 1rem 1rem 1rem 1rem;
  width: 13rem;
}
.detail-table {
  margin: 1rem 1rem 1rem 1rem;
  border-radius: 4px;
}

.button {
  display: inline-block;
}
</style>
